<template>
    <view class="container paddingBottomBar">
        <header-bar :config="config"></header-bar>
        <view class="top_bg"></view>
        <view class="order-main">
            <view class="consumer-top">
                <view @click="selectClient">
                    <view class="flex-v-c">
                        <image mode="aspectFill" src="@/static/icon/icon_kehu.png" class=""></image>选择客户
                    </view>
                    <view :class="{ color3: !client }">{{ client ? client : "请选择客户"
                        }}<uni-icons type="arrowright" size="24" customIcons="icon-black"></uni-icons></view>
                </view>
                <view class="sel-warehouse" @click="openWarehouse">
                    <view class="flex-v-c">
                        <image mode="aspectFill" src="@/static/icon/icon_ck.png" class=""></image>发货仓库
                    </view>
                    <view :class="{ color3: !warehouse }">{{ warehouse ? warehouse : "请选择仓库"
                        }}<uni-icons type="arrowright" size="24" customIcons="icon-black"></uni-icons></view>
                </view>
            </view>
            <view class="order-item product-item">
                <text class="title-text">选择商品</text>
                <view class="menu">
                    <!-- <view class="menuli" @click="addprogift">
						<iconsfont customIcons="icon-liwu" :color="mainColor" size="28" ></iconsfont>
						<text>添加赠品</text>
					</view> -->
                    <view class="menuli" @click="goUrl()">
                        <iconsfont customIcons="icon-bianji" :color="mainColor" size="28"></iconsfont>
                        <text>手动添加</text>
                    </view>
                    <view class="menuli" @click="scanAdd">
                        <iconsfont customIcons="icon-saoyisao" :color="mainColor" size="28"></iconsfont>
                        <text>扫码添加</text>
                    </view>
                    <view class="menuli" @click="addpro">
                        <iconsfont customIcons="icon-tianjiagouwuchesvg" :color="mainColor" size="28"></iconsfont>
                        <text>添加商品</text>
                    </view>
                </view>
                <view v-if="showImgs.length > 0">
                    <view class="mark"></view>
                    <view class="order-item-main" @click="addproOpen">
                        <view class="order-item-imgs">
                            <view class="img-item" v-for="(item, index) in showImgs" :key="index">
                                <image mode="aspectFill" :src="easyGetImgUrl(item)" class="order-item-img"></image>
                                <view class="order-item-name" v-if="itemname">{{ itemname }}</view>
                            </view>
                            <uni-icons type="more" v-if="imgs.length > 3"></uni-icons>
                        </view>
                        <view class="right-box">
                            <view class="num-box">
                                <text class="order-desc">共{{ carList.length }}种</text>
                            </view>
                            <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-item product-item" v-if="carGift.length > 0">
                <text class="title-text">赠品</text>
                <view>
                    <view class="mark"></view>
                    <view class="order-item-main" @click="addprogiftOpen">
                        <view class="order-item-imgs">
                            <view class="img-item" v-for="(item, index) in showImgsGift" :key="index">
                                <image mode="aspectFill" :src="easyGetImgUrl(item)" class="order-item-img"></image>
                                <view class="order-item-name" v-if="itemnameGift">{{ itemnameGift }}</view>
                            </view>
                            <uni-icons type="more" v-if="imgsGift.length > 3"></uni-icons>
                        </view>
                        <view class="right-box">
                            <view class="num-box">
                                <text class="order-desc">共{{ carGift.length }}种</text>
                            </view>
                            <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-item product-item product-item-line">
                <view class="title-text title-text-flex">
                    <view>商品金额</view>
                    <view class="title-text-right">
                        <text class="title-text-desc title-text-price" v-if="client && warehouse && carList.length > 0"
                            style="padding-right: 0">￥{{ total.totalPrice }}</text>
                        <text class="title-text-desc title-text-price" v-else style="padding-right: 0">￥0</text>
                    </view>
                </view>
            </view>
            <!-- 			<view class="order-item product-item product-item-line">
				<view class="title-text title-text-flex">
					<view>配送方式</view>
					<view class="title-text-right ">
						<text class="title-text-desc" style="padding-right: 0;">{{getPostText(usePost)}}</text>
					</view>
				</view>
			</view> -->
            <!-- 			<view class="order-item product-item product-item-line">
				<view class="title-text title-text-flex" style="padding-bottom: 0;" @click="openDate">
					<view>到货时间</view>
					<view class="title-text-right ">
						<text class="title-text-desc" style="padding-right: 0;" :class="{'color3':!time}">{{time?time:'请选择到货时间'}}</text>
						<uni-icons type="arrowright" size="24" customIcons="icon-black"></uni-icons>
					</view>
				</view>
			</view>
			<view class="order-item product-item product-item-line">
				<view class="title-text title-text-flex"  @click="openWorker">
					<view>业务员</view>
					<view class="title-text-right ">
						<text class="title-text-desc" style="padding-right: 0;" :class="{'color3':!workerName}">{{workerName?workerName:'请选择业务员'}}</text>
						<uni-icons type="arrowright" size="24" customIcons="icon-black"></uni-icons>
					</view>
				</view>
			</view> -->
        </view>
        <view class="bottom-bar">
            <view class="price-left">
                <text>商品总额：</text><text class="proce-unit">￥</text><text class="price-value">{{ total.totalPrice
                }}</text>
            </view>
            <button class="btn btn-main" @click="submit">去提交订单</button>
        </view>
        <uni-popup ref="popPostType" type="bottom" background-color="#fff" :safe-area="false">
            <view class="custom-actions-pop">
                <view class="custom-actions">
                    <button v-for="(item, index) in postTypes" :key="index" class="btn btn-gray"
                        :class="usePost == item ? 'selected-text' : ''" @click="selectFn(item)">
                        {{ getPostText(item) }}
                    </button>
                </view>
                <view class="cancel">
                    <button class="btn btn-gray" @click="cancelFn()">取消</button>
                </view>
            </view>
        </uni-popup>
        <uni-calendar :date="time" class="zindeup" ref="startDate" :insert="false" @confirm="confirmDate">
        </uni-calendar>
        <uni-popup type="bottom" ref="warehousepopup" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择发货仓库</text></view>
                <scroll-view scroll-y="true" class="pay-way-scroll">
                    <view class="pay-way">
                        <view class="pay-way-item" v-for="(item, index) in WarehouseList"
                            @click="selectWarehouse(item, index)">
                            <text>{{ item.WarehouseName }}</text>
                        </view>
                    </view>
                </scroll-view>
                <button class="btn" @click="warehouscancel">取消</button>
            </view>
        </uni-popup>
        <uni-popup type="bottom" ref="workerpopup" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择业务员</text></view>
                <scroll-view scroll-y="true" class="pay-way-scroll">
                    <view class="pay-way">
                        <view class="pay-way-item" v-for="(item, index) in WorkerList"
                            @click="selectWorker(item, index)">
                            <text>{{ item.RealName }}</text>
                        </view>
                    </view>
                </scroll-view>
                <button class="btn" @click="cancel">取消</button>
            </view>
        </uni-popup>
        <uni-popup ref="tip" type="dialog">
            <uni-popup-dialog type="text" title="温馨提示" content="检测到该客户之前有加购未下单购物车数据，是否直接加载？" @close="tipcolse"
                @confirm="save"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations, mapState, mapGetters } from "vuex"
import { SubmitFromCar } from "@/service/api/order.js"
import { GetDisPersonnel } from "@/service/api/store.js"

import { AddScanBuyProductToCar } from "@/service/api/product.js"
import { GetWarehouseList, GetUserDefaultWarehouse } from "@/service/api/warehouse.js"
import { GetPostTypes } from "@/service/api/company.js"
import { deleteRefundOrderTemp, getTempCartTotal, getCarList } from "@/utils/valetCartUtil.js"
import { GetCarList } from "@/service/api/user.js"
export default {
    components: {},
    data() {
        return {
            selectType: 0,
            config: {
                title: "开单收银",
                centerSlot: true,
                rightSlot: false,
                color: ["#ffffff"],
                backPage: "/pages/index/index",
            },
            mainColor: "",
            client: "",
            valetUserId: 0,
            warehouse: "",
            warehouseId: 0,
            time: "",
            WorkerList: [],
            workerName: "",
            workerId: "",
            WarehouseList: [],

            valetUserInfo: "",
            ids: "",
            storeUserId: 0,
            usePost: 0,
            postTypes: [],
            useAddress: null,
            postPrice: 0,
            cartDatas: [],

            imgs: [],
            showImgs: [],
            itemname: "", //单个商品显示名称
            imgsGift: [],
            showImgsGift: [],
            itemnameGift: "", //单个商品显示名称
            systemInfo: {},
            dataList: [],
            total: {
                totalNum: 0,
                totalPrice: 0,
                class: 0,
            },
            carList: [],
            carGift: [],
        }
    },
    watch: {
        getValetCartData(e) {
            this.getTotal()
            this.$forceUpdate()
        },
    },
    computed: {
        ...mapGetters(["getValetCartData"]),
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.mainColor = mainColor
        this.config.backgroundColor = [1, mainColor]
    },
    onLoad(e) {
        this.selectType = e.selectType
        if (e.valetUserInfo) {
            this.valetUserInfo = JSON.parse(decodeURIComponent(e.valetUserInfo))
            this.valetUserId = Number(e.valetUserId)
            this.client = this.valetUserInfo.StoreName
            this.storeUserId = this.valetUserInfo.StoreUserId
            this.$forceUpdate()
        }
        if (e.warehouseId) {
            this.warehouseId = e.warehouseId
        }
        if (e.ids) {
            this.ids = e.ids
            this.param.carIds = e.ids
        }
    },
    mounted() {
        this.GetWarehouseList()
        this.getPostTypes()
        this.systemInfo = uni.getSystemInfoSync()
        this.getDisPersonnel()
    },
    onShow() {
        this.showImgs = []
        if (this.warehouseId) {
            this.carlist()
            this.getTotal()
        } else if (this.storeUserId > 0) {
            this.GetUserDefaultWarehouse() //客户默认仓库
        }
        getCarList(this.valetUserId, this.warehouseId, -1).then((res) => {
            this.$forceUpdate()
        })
    },
    methods: {
        getTotal() {
            getTempCartTotal(this.getValetCartData, (back) => {
                this.total = {
                    totalNum: back.totalNum,
                    totalPrice: back.totalPrice,
                    class: back.class,
                }
            })
        },
        getIds() {
            let ids = []
            this.getValetCartData.forEach((pro) => {
                pro.SubItems.forEach((sub) => {
                    ids.push(String(sub.ID))
                })
            })
            let value = ""
            if (ids.length > 0) {
                value = ids.join(",")
            }
            return value
        },
        carlist() {
            let param = {
                priceType: 1,
                isTempCar: true,
                valetUserId: this.valetUserId,
                warehouseId: this.warehouseId,
                isGift: -1,
            }
            GetCarList(param).then((res) => {
                let carList = []
                let carGift = []
                res.Data.forEach((e) => {
                    if (e.IsGift) {
                        carGift.push(e)
                    } else {
                        carList.push(e)
                    }
                })
                this.carList = carList
                this.carGift = carGift
                // if(this.carList.length > 0){
                // 	this.$refs.tip.open()
                // }
                this.getImageList(this.carList)
                this.getGiftImageList(this.carGift)
                this.$forceUpdate()
            })
        },
        selectClient() {
            let url = "/pages/select/select-customer?selectType=2"
            this.easyGoTo(url)
        },
        openDate() {
            //打开选择日期
            this.$refs.startDate.open()
        },
        confirmDate(e) {
            //选择开始日期
            this.time = e.fulldate
        },
        openWorker() {
            //打开选择日期
            this.$refs.workerpopup.open()
        },
        save() {
            this.$refs.tip.close()
            this.getImageList(this.carList)
            this.$forceUpdate()
        },
        goUrl() {
            if (this.valetUserId == 0) {
                this.easyToast("请先选择客户")
                return
            }
            if (this.warehouseId == 0) {
                this.easyToast("请先选择发货仓库")
                return
            }
            this.easyGoTo(
                "/pages/customer/inputBarCode?valetUserId=" +
                this.storeUserId +
                "&valetUserInfo=" +
                encodeURIComponent(JSON.stringify(this.valetUserInfo)) +
                "&warehouseId=" +
                this.warehouseId,
            )
        },
        tipcolse() {
            this.$refs.tip.close()
        },
        getDisPersonnel() {
            GetDisPersonnel({ joinPosition: 5 }).then((res) => {
                if (res.State == 1) {
                    // let userInfo = storage.getCache("userInfo")
                    // let data = res.Data.find(e=>{return e.Tel== userInfo.Tel})
                    this.WorkerList = res.Data
                }
            })
        },
        openWarehouse() {
            //打开选择日期
            this.$refs.warehousepopup.open()
        },
        warehouscancel() {
            //打开选择日期
            this.$refs.warehousepopup.close()
        },
        cancel() { },
        selectWorker(item, index) {
            this.workerName = item.RealName
            this.workerId = item.ID
            this.$forceUpdate()
            this.$refs.workerpopup.close()
        },
        selectWarehouse(item, index) {
            this.warehouse = item.WarehouseName
            this.warehouseId = item.WarehouseId
            this.carlist()
            this.$forceUpdate()
            this.$refs.warehousepopup.close()
        },
        GetWarehouseList() {
            GetWarehouseList().then((res) => {
                if (res.State == 1) {
                    this.WarehouseList = res.Data
                    if (this.warehouseId > 0) {
                        let warehousename = res.Data.filter((e) => {
                            return e.WarehouseId == this.warehouseId
                        })
                        this.warehouse = warehousename[0].WarehouseName
                    }
                }
            })
        },
        GetUserDefaultWarehouse() {
            let path = "?userId=" + this.storeUserId
            GetUserDefaultWarehouse(path).then((res) => {
                if (res.State == 1) {
                    GetWarehouseList().then((rsp) => {
                        if (rsp.State == 1) {
                            let warehousename = rsp.Data.filter((e) => {
                                return e.WarehouseId == res.Data.WarehouseId
                            })
                            if (warehousename.length > 0) {
                                this.warehouse = warehousename[0].WarehouseName
                                this.warehouseId = warehousename[0].WarehouseId
                            }
                            this.carlist()
                        }
                    })
                }
            })
        },
        getPostTypes() {
            GetPostTypes().then((res) => {
                this.postTypes = res.Data.PostType
                let defaultPost = this.postTypes.find((e) => {
                    return e == 0
                })
                if (!defaultPost) {
                    this.postTypes.unshift(0)
                }
                this.usePost = res.Data.PostDefault
            })
        },
        getImageList(list) {
            this.itemname = ""
            let arr = []
            if (list) {
                list.forEach((e) => {
                    arr.push(e.V_ThumbnailUrl160)
                })
            }
            if (list.length == 1) {
                this.itemname = list[0].V_Title
            }
            this.imgs = arr
            this.showImgs = arr.slice(0, 3)
        },
        getGiftImageList(list) {
            let arr = []
            if (list) {
                list.forEach((e) => {
                    arr.push(e.V_ThumbnailUrl160)
                })
            }
            if (list.length == 1) {
                this.itemnameGift = list[0].V_Title
            }
            this.imgsGift = arr
            this.showImgsGift = arr.slice(0, 3)
        },
        telFn() {
            uni.makePhoneCall({
                phoneNumber: this.useAddress.ContactTel,
            })
        },
        submit() {
            if (this.warehouseId == 0) {
                this.easyToast("请先选择发货仓库")
                return
            }
            let ids = this.getIds()
            if (ids.length > 0) {
                this.easyGoTo(
                    "/pages/order/add-order?ids=" +
                    ids +
                    "&valetUserInfo=" +
                    encodeURIComponent(JSON.stringify(this.valetUserInfo)) +
                    "&warehouseId=" +
                    this.warehouseId,
                )
            } else {
                this.easyToast("请先添加商品")
            }
        },
        selectFn(value) {
            this.usePost = value
            this.cancelFn()
        },
        cancelFn() {
            this.$refs.popPostType.close()
        },
        addpro() {
            if (this.valetUserId == 0) {
                this.easyToast("请先选择客户")
                return
            }
            if (this.warehouseId == 0) {
                this.easyToast("请先选择发货仓库")
                return
            }
            this.easyGoTo(
                "/pages/product/index-valet?valetUserId=" +
                this.storeUserId +
                "&valetUserInfo=" +
                encodeURIComponent(JSON.stringify(this.valetUserInfo)) +
                "&warehouseId=" +
                this.warehouseId,
            )
        },
        addprogift() {
            if (this.valetUserId == 0) {
                this.easyToast("请先选择客户")
                return
            }
            if (this.warehouseId == 0) {
                this.easyToast("请先选择发货仓库")
                return
            }
            this.easyGoTo(
                "/pages/product/index-valet?valetUserId=" +
                this.storeUserId +
                "&valetUserInfo=" +
                encodeURIComponent(JSON.stringify(this.valetUserInfo)) +
                "&warehouseId=" +
                this.warehouseId +
                "&isGift=true",
            )
        },
        addproOpen() {
            this.easyGoTo(
                "/pages/product/index-valet?valetUserId=" +
                this.storeUserId +
                "&valetUserInfo=" +
                encodeURIComponent(JSON.stringify(this.valetUserInfo)) +
                "&warehouseId=" +
                this.warehouseId +
                "&isShowCar=true",
            )
        },
        addprogiftOpen() {
            this.easyGoTo(
                "/pages/product/index-valet?valetUserId=" +
                this.storeUserId +
                "&valetUserInfo=" +
                encodeURIComponent(JSON.stringify(this.valetUserInfo)) +
                "&warehouseId=" +
                this.warehouseId +
                "&isGift=true&isShowCar=true",
            )
        },
        scanAdd() {
            if (this.valetUserId == 0) {
                this.easyToast("请先选择客户")
                return
            }
            if (this.warehouseId == 0) {
                this.easyToast("请先选择发货仓库")
                return
            }
            let that = this
            //扫一扫
            // 允许从相机和相册扫码 res.result
            uni.scanCode({
                success: function (res) {
                    let path =
                        "?SearchKey=" + res.result + "&UserId=" + that.valetUserId + "&WarehouseId=" + that.warehouseId
                    AddScanBuyProductToCar(path).then((res) => {
                        if (res.State == 1) {
                            getCarList(that.valetUserId, that.warehouseId, -1).then((res) => {
                                that.$forceUpdate()
                            })
                            that.carlist()
                        } else {
                            that.easyToast(res.Msg)
                        }
                    })
                },
            })
        },
    },
}
</script>

<style lang="scss">
.icon-black {
    color: $color-gray-1 !important;
}

.menu {
    display: flex;
    justify-content: flex-end;

    .menuli {
        width: 160rpx;
        height: 50rpx;
        background: rgba(219, 0, 50, 0.07);
        border-radius: 25rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 12rpx;

        text {
            font-size: 24rpx;
            color: $app-color-main;
            padding-left: 8rpx;
        }
    }
}

.consumer-top {
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    margin-bottom: 16rpx;

    &>view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 92rpx;
        font-size: 28rpx;
        color: $color-gray-1;
    }

    .sel-warehouse {
        background: #f7f7f7;
        border-radius: 8rpx;
        margin-top: 16rpx;
    }

    .flex-v-c {
        font-weight: bold;
    }

    image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 12rpx;
    }
}

.cell-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 $app-page-padding;
    height: 90rpx;

    .cell-label {
        flex: 1;
        display: flex;
        align-items: center;
    }
}

.bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120rpx;
    padding: 0 30rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 10rpx 0px rgba(0, 0, 0, 0.1);

    .price-left {
        flex: 1;

        text {
            font-size: 24rpx;
            color: #333;
        }

        .proce-unit {
            font-size: $font-size-24;
            color: $app-color-main;
        }

        .price-value {
            font-size: 40rpx;
            color: $app-color-main;
            font-weight: bold;
        }
    }

    .btn {
        width: 220rpx;
        height: 80rpx;
        color: $app-color-main;
        border-radius: 45rpx;
        font-size: 32rpx;
        color: #ffffff;
    }
}

.cell-icon {
    margin-top: 4rpx;
}

.msg-input {
    display: flex;
    display: flex;
    height: 150rpx;
    background: #f7f7f7;
    border-radius: $border-radius-10;
    padding: 10rpx;
    width: calc(100% - 20rpx);
}

.remark-item {}

.top_bg {
    height: 128rpx;
    background: $app-color-main;
    border-radius: 0px 0px 40rpx 40rpx;
}

.order-item {
    background: $color-white;
    margin-bottom: 24rpx;
    // background: red;
}

.product-item {
    padding: 32rpx $app-page-padding;
    border-radius: 16rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        // border-bottom: 1rpx solid #EBEBEB;
        margin-bottom: 24rpx;
        font-size: 28rpx;
    }

    .title-text-flex {
        justify-content: space-between;
        align-items: center;
    }

    .title-text-right {
        font-weight: normal;
    }

    .title-text-desc {
        font-size: $font-size-28;
        color: $color-gray-1;
        padding-right: 12rpx;
        font-weight: normal;
    }

    .title-text-price {
        font-weight: bold;
        color: $app-color-main;
    }
}

.product-item-line {
    .title-text {
        border-bottom: none;
        margin-bottom: 0rpx;
    }
}

.mark {
    border-left: 16rpx solid transparent;
    border-right: 16rpx solid transparent;
    border-bottom: 16rpx solid #f7f7f7;
    width: 0;
    height: 0;
    margin-left: 50rpx;
    margin-top: 10rpx;
    margin-bottom: -2rpx;
}

.order-item-main {
    display: flex;
    flex: 1;
    // margin-top: 20rpx;
    flex-direction: row;
    padding: $app-page-padding;
    background: #f7f7f7;
    border-radius: 16rpx;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            flex: 1;
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}

.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;

        text {
            margin-bottom: 4rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.order-main {
    margin-top: -128rpx;
    padding: 0 $app-page-padding $app-page-padding;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-t-l {
            height: 98rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .order-header-button {
            width: 158rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: $app-color-main;
            font-size: $font-size-28;
        }

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }

    .order-user {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .location {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;

            image {
                width: 42rpx;
                height: 40rpx;
            }
        }

        .user-info {
            display: flex;
            flex: 1;
            display: flex;
            flex-direction: column;

            text {
                color: $app-color-main;
            }

            .user-info-name {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: $font-size-32;
                color: $color-gray-1;
                font-weight: 700;
                margin-bottom: 12rpx;

                image {
                    width: 42rpx;
                    height: 40rpx;
                    margin-right: 8rpx;
                }
            }

            .user-info-location {
                font-size: $font-size-24;
                line-height: 32rpx;
                color: $color-gray-2;
            }
        }
    }

    .order-items {
        padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;

        .order-info-item {
            padding: 14rpx 0;
            display: flex;
            flex-direction: row;

            text {
                font-size: $font-size-24;
            }

            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
            }

            .value {
                color: $app-color-main;
            }

            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }
}

.order-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $color-white;
    box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 $app-page-padding;

    .btn {
        height: 64rpx;
        margin-left: 20rpx;
        padding: 0 40rpx;
    }
}

.logistics {
    height: 88rpx;
    border-top: 1rpx solid #ebebeb;
    display: flex;
    padding: 0 $app-item-padding;
    justify-content: space-between;
    align-items: center;

    .logistics-title {
        font-size: $font-size-28;
        font-weight: bold;
    }

    .logistics-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .logistics-desc {
        padding-right: 12rpx;
    }
}

.remark {
    background: #f7f7f7;

    .remark-main {
        border-bottom: 1rpx solid #ebebeb;

        .remark-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: $color-gray-1;
            padding: 24rpx 24rpx 20rpx 24rpx;

            view {
                font-size: $font-size-28;
            }

            text {
                font-size: $font-size-24;
                color: $color-gray-3;
            }
        }

        .remark-desc {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding: 0rpx 24rpx 20rpx 24rpx;
            word-break: break-all;
        }
    }

    & .remark-main:last-child {
        border: none;
    }
}

.remarkmenu {
    display: flex;
    padding: 24rpx;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;
    border: 1rpx solid #f7f7f7;
    border-top: none;

    text {
        color: $color-gray-3;
    }
}

.pop-return-box {
    background: $color-white;
    border-radius: $border-radius-10;
    padding: $app-page-padding;
    width: 600rpx;

    textarea {
        max-height: 350rpx;
        background: #f7f7f7;
        border-radius: 8rpx;
        border: 1rpx solid #979797;
        padding: 10rpx 0;
        text-indent: 10rpx;
        margin: 24rpx 0;
        width: 598rpx;
    }

    .pop-return-title {
        display: flex;
        justify-content: center;

        text {
            font-weight: 700;
            font-size: 34rpx;
        }
    }

    .pop-action {
        border-top: 1rpx solid rgba(0, 0, 0, 0.1);
        margin: 0 -24rpx -24rpx -24rpx;
        height: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        view {
            width: 50%;
            text-align: center;
            height: 110rpx;
            line-height: 110rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: $app-color-main;
        }

        &>view:first-child {
            color: $color-gray-1;
            border-right: 1rpx solid rgba(0, 0, 0, 0.1);
        }
    }

    .return-msg {
        margin-bottom: 20rpx;

        .card-group-cell {
            margin-left: 0 !important;
        }
    }

    .img-title {
        display: flex;
        color: $app-color-text-tip;
        margin-bottom: 20rpx;
    }

    .action {
        display: flex;
        flex-direction: row;

        .btn {
            flex: 1;
            border-radius: $border-radius-10;
            height: 70rpx;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

.pop-pro-list {
    background: #f1f1f1;
    border-radius: 24rpx 24rpx 0 0;

    .pop-header {
        padding-top: 52rpx;
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: calc(100vh - 100rpx);
    }
}

.ptb0 {
    padding-bottom: 0 !important;
}

.order-submit-list {
    background-color: $color-white;
    border-radius: $border-radius-10;

    .policy-price-box {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;

        .label-text {
            flex: 1;
        }
    }

    .policy-after-price {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        justify-content: flex-end;
    }
}

.pop-pro-list {
    background: #f1f1f1;

    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: calc(100vh - 100rpx);
    }
}

.popupright {
    .icon-close {
        right: auto !important;
        left: 24rpx;
        color: $color-gray-3;
    }
}

.coupon-item {
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;

    .coupon-item-main {
        display: flex;
        flex-direction: row;
        align-items: center;

        .icon-coupon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }

        .icon-coupon-name {
            flex: 1;
        }

        .no-use-coupon {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }

        .use-coupon {
            color: $color-orange-1;
            font-size: $font-size-24;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 60%;
        }

        .icon-right {
            margin-left: 8rpx;
        }
    }

    .coupon-item-desc {
        text {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }
    }
}

.color3 {
    color: $color-gray-3 !important;
}

.pay-way-scroll {
    max-height: 50vh;
}

.pay-way-item {
    justify-content: center;
    border-color: #f2f2f2 !important;

    text {
        font-size: 28rpx;
    }
}
</style>
